<template>
	<cl-dialog
		title="调部门"
		width="500px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@close="close"
		:props="{
			closeOnClickModal: false
		}"
	>
		<el-form ref="form" :model="form" :rules="rules" label-position="top" :disabled="saving">
			<el-form-item label="所属事业部" prop="biz_id">
				<cl-select
					v-model="form.biz_id"
					style="width: 100%"
					placeholder="请选择事业部"
					filterable
					disabled
					@change="bizChange"
				>
					<el-option
						v-for="item in bizList"
						:key="item.biz_id"
						:label="item.biz_name"
						:value="item.biz_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="所属部门" prop="dept_ids">
				<!-- <cl-select
					v-model="form.dept_id"
					placeholder="请选择所属部门"
					filterable
					style="width: 100%"
				>
					<el-option
						v-for="item in deptList"
						:key="item.dept_id"
						:label="item.dept_name"
						:value="item.dept_id"
					/>
				</cl-select> -->
				<cl-cascader
					style="width: 100%"
					v-model="form.dept_ids"
					:options="deptList"
					:props="{
						checkStrictly: false,
						value: 'dept_id',
						label: 'dept_name'
					}"
					filterable
				/>
			</el-form-item>
			<el-form-item label="权限组" prop="ro_id">
				<cl-select
					v-model="form.ro_id"
					placeholder="请选择权限组"
					filterable
					style="width: 100%"
				>
					<el-option
						v-for="item in roleList"
						:key="item.ro_id"
						:label="item.ro_name"
						:value="item.ro_id"
					/>
				</cl-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" @click="submit" :loading="saving">确定</el-button>
		</template>
	</cl-dialog>
</template>

<script>
import { delEmptyChildren } from "@/utils";
import { last } from "cl-admin/utils";
export default {
	name: "adjust-dept",
	data() {
		return {
			visible: false,
			form: {
				user_id: "",
				biz_id: "",
				// dept_id: "",
				dept_ids: [],
				ro_id: "", //权限id
				is_teacher: 0
			},
			rules: {
				biz_id: [{ required: true, message: "请选择所属事业部" }],
				dept_ids: [{ required: true, message: "请选择所属部门" }],
				ro_id: [{ required: true, message: "请选择权限组" }]
			},
			saving: false,
			deptList: [], //部门
			roleList: [] //权限数据
		};
	},

	created() {
		this.form.biz_id = this.getCurrBiz();
		this.bizChange();
	},
	methods: {
		open(data) {
			this.visible = true;
			Object.keys(this.form).forEach(key => {
				this.form[key] = data[key];
			});
			this.form.dept_ids =
				data.dept_parent_id == 0 ? [data.dept_id] : [data.dept_parent_id, data.dept_id];
			data.biz_id && this.bizChange();
		},
		beforeClose(done) {
			if (this.saving) return;
			done();
		},
		close() {
			if (this.saving) return;
			this.visible = false;
			this.reset();
		},
		reset() {
			this.saving = false;
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				try {
					const { is_teacher, dept_ids, ...args } = this.form;
					let dept_id = last(dept_ids);
					let form = {
						dept_id,
						...args
					};
					this.saving = true;
					await this.$service.user.change(form);
					this.$message.success("操作成功");
					this.$emit("confirm");
					this.saving = false;
					this.close();
				} catch (error) {
					this.saving = false;
				}
			});
		},
		// 事业部
		bizChange(v) {
			this.deptList = [];
			this.roleList = [];
			this.getDeptList();
			this.getRoleList();
		},
		// 部门
		async getDeptList() {
			const { biz_id, is_teacher } = this.form;
			if (!biz_id) return;
			const data = await this.$service.dept.list({
				parent_id: 0,
				is_store: is_teacher,
				biz_id
			});
			// this.deptList = data.reduce((list, curr) => [...list, ...curr.children], []);
			this.deptList = delEmptyChildren(data);
		},
		// 权限组列表
		async getRoleList() {
			const { biz_id, is_teacher } = this.form;
			const data = await this.$service.role.list({
				status: 1,
				biz_id,
				is_teacher
			});
			this.roleList = (data || []).filter(v => v.is_super != 1);
		}
	}
};
</script>
